import { getListApi } from "@/api/teacher";
import { reactive, onMounted, nextTick, ref } from "vue"

export default function useTable() {
    //表格高度
    const tableHeight = ref(0)
    //表格数据
    const tableList = reactive({
        list: []
    })
    //表格分页数据
    //表格列
    const columns = [
        {
            title: '教师姓名',
            key: 'teacherName',
            dataIndex: 'teacherName',
        },
        {
            title: '教师编号',
            key: 'teacherNum',
            dataIndex: 'teacherNum',
        },
        {
            title: '备注',
            key: 'teacherDesc',
            dataIndex: 'teacherDesc'
        },
        {
            title: "操作",
            key: "action",
            align: "center",
            width: 220
        }
    ];
    //搜索、分页等数据域
    const rolePage = reactive({
        total: 0,
        current: 1,
        showSizeChanger: true,
        pageSize: 10,
        name: '',  //搜索关键字
        pageSizeOptions: [
            '10', '20', '30', '40', '50'
        ],
        showTotal: (total: number) => `共有 ${total} 条数据`,

        // 页数改变时触发
        onChange: (current: number, size: number) => {
            rolePage.current = current;
            rolePage.pageSize = size;
            listParam.currentPage = current;
            listParam.pageSize = size;
            getList().then(r =>{} );
        }
    })
    //列表参数
    const listParam = reactive({
        teacherName: '',
        currentPage: rolePage.current,
        pageSize: rolePage.pageSize
    })
    //获取表格数据
    const getList = async () => {
        let res = await getListApi(listParam)
        if (res && res.code == 200) {
            tableList.list = res.data.records;
            rolePage.total = res.data.total;
        }
    }
    //搜索按钮
    const searchBtn = () => {
        getList().then(r =>{} );
    }
    //重置按钮
    const resetBtn = () => {
        listParam.currentPage = 1
        listParam.teacherName = ''
        getList().then(r =>{} );
    }
    onMounted(() => {
        nextTick(() => {
            tableHeight.value = window.innerHeight - 300
        }).then(r =>{} );
        getList().then(r =>{} );
    })
    return {
        tableList,
        columns,
        rolePage,
        getList,
        tableHeight,
        searchBtn,
        resetBtn,
        listParam: listParam
    }
}
